<template>
	<view class="container">
		<!-- 搜索部分 -->
		<view class="searchBox">
			<view class="inputBox">
				<input type="text" placeholder="查询">
			</view>
			<view class="searchIcon">图标</view>
		</view>
		<!-- /搜索部分 -->
		<view class="titleView">
			<text class="title">已下载的课本</text>
		</view>
		<view class="listView" v-for="(item,index) in bookList">
			<view class="cover"></view>
			<view class="detailsView">
				<text class="bookTitle">{{item.title}}</text>
				<text class="wordCount">单词数量{{item.wordCount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookList: [
					{
						title:"十天搞定六级词汇便携版",
						wordCount:1583,
					},
					{
						title:"十天搞定六级词汇便携版",
						wordCount:1583,
					},
					{
						title:"十天搞定六级词汇便携版",
						wordCount:1583,
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		width: 20.44rem;
		margin: 0 auto;
	}
	.searchBox {
		position: relative;
		margin-bottom: 1.8rem;
	}
	
	.searchBox input {
		width: 19.94rem;
		height: 2.25rem;
		padding: 0 1rem;
		line-height: 1.25rem;
		border-radius: 1.5rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(0, 82, 217, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: Arial;
	}
	
	.searchBox .searchIcon {
		position: absolute;
		right: 1rem;
		top: 0.5rem;
	}
	
	.titleView {
		justify-content: flex-start;
	}
	
	.titleView .title {
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	
	.listView {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 5.6rem;
		padding: 0.68rem 0rem;
	}
	.listView .cover {
		width: 4.25rem;
		height: 4.88rem;
		background-color: black;
		margin-right: 1.62rem;
	}
	.listView .detailsView {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-around;
	}
	.listView .bookTitle {
		color: rgba(51, 51, 51, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.listView .wordCount {
		color: rgba(115, 113, 113, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
</style>
